<template>
  <div>
    <div class="Search_list">
      <van-icon name="arrow-left" @click="fnnn" />

      <van-search
        v-model="value"
        show-action
        label=""
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>

    <div class="serch_lis">
      <h1>历史搜索</h1>
      <a v-for="(item, index) in value1" :key="index">{{ item }}</a>
    </div>
    <div class="Serch_button">
      <div class="Serch_buton-h1">
        <hr />
        <h1>发现好物</h1>
      </div>
      <div>
        <van-card
          v-for="item in value3"
          :key="item.id"
          :price="item.price + '.00'"
          :desc="item.dsec2"
          :title="item.name"
          :thumb="item.url"
        />
      </div>
      <div>
        <van-card
          v-for="item in value3"
          :key="item.id"
          :price="item.price + '.00'"
          :desc="item.dsec2"
          :title="item.name"
          :thumb="item.url"
        />
      </div>
      <div>
        <van-card
          v-for="item in value3"
          :key="item.id"
          :price="item.price + '.00'"
          :desc="item.dsec2"
          :title="item.name"
          :thumb="item.url"
        />
      </div>
      <div>
        <van-card
          v-for="item in value3"
          :key="item.id"
          :price="item.price + '.00'"
          :desc="item.dsec2"
          :title="item.name"
          :thumb="item.url"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Search } from "@/api";
export default {
  mounted() {
    this.value1 = JSON.parse(localStorage.getItem("aaa") || "[]");
  },
  data() {
    return {
      value: "",
      value1: [],
      value2: [],
      value3: [],
    };
  },
  methods: {
    onSearch() {
      //判断
      this.value1.push(this.value);
      console.log(this.value1);
      // 等于空就不添加
      if (!(this.value == "")) {
        localStorage.setItem("aaa", JSON.stringify(this.value1));
      }
      var arr = [];
      for (var i = 0; i < this.value2.length; i++) {
        console.log(this.value2[i].dsec2.indexOf(this.value));
        if (this.value2[i].dsec2.indexOf(this.value) >= 0) {
          arr.push(this.value2[i]);
        }
      }

      this.$store.state.ii = arr;
      console.log(arr);
      setTimeout(() => {
        this.$router.push({ path: "/Searchlist" });
      });
    },
    fnnn() {
      this.$router.push({ path: "/" });
    },
  },

  async created() {
    const data = await Search();

    this.value2 = data.data.search;
    this.value3 = data.data.search;
    console.log(this.value2);
  },
};
</script>

<style lang="less" scoped>
.serch_lis {
  font-size: 15px;
  margin: 10px 0 0 0;
  a {
    display: inline-block;
    margin: 10px 10px;
    padding: 5px;

    color: #000;
    font-size: 16px;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
  }
}
.van-search {
  height: 80px;

  .van-search__action {
    font-size: 16px;
    color: rgb(43, 206, 146);
    font-weight: 900;
  }
  .van-cell {
    background-color: rgb(45, 192, 141);
    border-radius: 10px;
    height: 50px;

    line-height: 50px;
    /deep/.van-cell__value {
      background-color: rgb(218, 232, 232);

      line-height: 40px;
      font-size: 16px;
    }
  }
}
.Serch_button {
  .Serch_buton-h1 {
    position: relative;
    height: 50px;
    margin: 20px 0 0 0;
    hr {
      position: absolute;
      width: 100%;
      z-index: 0;
    }
    h1 {
      position: absolute;
      font-size: 20px;
      width: 100px;
      margin: -3px 39% 0px;
      background-color: #fff;

      text-align: center;
    }
  }

  .van-card {
    border-radius: 10px;
    background-color: rgb(79, 192, 141);

    width: 98%;
    margin: 0 auto 10px;
  }
}
.Search_list {
  display: flex;
  width: 100%;

  .van-icon {
    width: 5%;
    line-height: 54px;
    font-size: 20px;

    padding: 0 0 0 10px;
    margin: 0;
    line-height: 80px;
  }
  .van-search {
    width: 90%;

    padding: 0;
    margin: 0;
  }
}
</style>